<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2.16练习</title>
    <style>
    *{
        margin: 0;
        padding: 0;
        list-style: none;
        text-decoration: none;
    }   
    body{
        padding: 15px;
    }
    header{
        margin-bottom: 20px;
        /* 兄弟元素使用 */
    }
    nav{
        margin-bottom: 20px;
    }
    nav a{
      background-color: pink;
      border: radius 5px; 
      margin-right: 10px;
      padding: 5px;
    }
    main{
      display: flex;
      /* 横向排列 */
    }

    article{
      display: flex;
      flex-direction: column;
      /* 弹性盒子；内容自动增减尺寸 */
      border: 3px dashed black;
      /* 虚线黑色 */
      padding: 10px;
    }

    .img{
      width: 100%;
      height: 100px;
      background-color: pink;
    }

    p{
      border: 1px solid skyblue;
      margin: 5px 0;
      /* 上下为5像素，左右为0 */
    }

    button{
      background-color: springgreen;
      height: 50px;
      color: #fff;
      /* 字体属性 */
    }
    </style>
    
</head>
<body>
    <header>
        <h1>我的网站首页</h1>
      </header>
  
      <nav>
        <a href="">首页</a>
        <a href="">关于</a>
        <a href="">博客</a>
        <a href="">联系我们</a>
      </nav>
  
      <main>
        <article>
          <div class="img"></div>
          <p>
            这是一段文字这是一段文这是一段文这是一段文这是一段文这是一段文这是一段文这是一段文这是一段文
          </p>
          <button>点我查看</button>
        </article>
  
        <article>
          <div class="img"></div>
          <p>
            这是一段文字这是一段文这是一段文这是一段文这是一段文这是一段文这是一段文这是一段文这是一段文这是一段文字这是一段文这是一段文这是一段文这是一段文这是一段文这是一段文这是一段文这是一段文
          </p>
          <button>点我查看</button>
        </article>
  
        <article>
          <div class="img"></div>
          <p>
            这是一段文字这是一段文这是一段文这是一段文这是一段文这是一段文这是一段文这是一段文这是一段文这是一段文字这是一段文这是一段文这是这是一段文这是一段文这是一段文这是一段文字这是一段文这是一段文这是一段文这是一段文这是一段文这是一段文这是一段文这是一段文这是一段文字这是一段文这是一段文这是一段文这是一段文这是一段文这是一段文这是一段文这是一段文
          </p>
          <button>点我查看</button>
        </article>
      </main>
  
      <footer>Copyright &#169; 2021</footer>
</body>
</html>